<template>
    <div class="main">
        <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" size="default"
            status-icon :rules="rules">
            <el-form-item label="标题" prop="title">
                <el-input v-model="ruleForm.title" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="电话" prop="phone">
                <el-input v-model="ruleForm.phone" placeholder="请输入" />
            </el-form-item>

            <el-form-item label="图片" prop="photo">
                <Uploads :row="ruleForm.photo" @OK="OKdata" @removeImg="removeImg"></Uploads>
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-radio-group v-model="ruleForm.type" @change="changeType">
                    <el-radio label="景区" value="0" />
                    <el-radio label="住宿" value="1" />
                    <el-radio label="特产" value="2" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="人均价" prop="price">
                <el-input v-model="ruleForm.price" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="标签" prop="label">
                <el-tag v-for="tag in ruleForm.label" :key="tag" class="mx-1" closable :disable-transitions="false"
                    @close="handleClose(tag)">
                    {{ tag }}
                </el-tag>
                <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="ml-1 w-20" size="small"
                    @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
                <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
                    +
                </el-button>
            </el-form-item>
            <el-form-item label="营业时间段">
                <el-input v-model="ruleForm.business" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="交通攻略">
                <el-input v-model="ruleForm.trafficStrategy" :rows="2" type="textarea" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="小贴士">
                <el-input v-model="ruleForm.tips" :rows="2" type="textarea" placeholder="请输入" />
            </el-form-item>


            <el-form-item label="门票" v-if="ruleForm.type == 0">
                <el-button class="mt-4" style="width: 100px" @click="onAddItemtickets">添加门票</el-button>
                <div class="tableDiv">
                    <el-table :data="ruleForm.tickets" style="width: 100%" max-height="250">
                        <el-table-column fixed prop="title" label="门票名称" width="200">
                            <template #default="scope">
                                <el-input v-model="scope.row.title" placeholder="请输入" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="label" label="门票标签" width="260">
                            <template #default="scope">
                                <el-tag v-for="tag in scope.row.label" :key="tag" class="mx-1" closable
                                    :disable-transitions="false" @close="handleClosetickets(tag, scope.$index)">
                                    {{ tag }}
                                </el-tag>
                                <el-input v-if="inputVisibletickets == scope.$index" ref="InputRef" v-model="ticketsTab"
                                    class="ml-1 w-20" size="small"
                                    @keyup.enter="handleInputConfirmtickets(scope.$index)"
                                    @blur="handleInputConfirmtickets(scope.$index)" />
                                <el-button v-else class="button-new-tag ml-1" size="small"
                                    @click="showInputtickets(scope.$index)">
                                    +
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="notice" label="购买须知" width="300">
                            <template #default="scope">
                                <el-input v-model="scope.row.notice" placeholder="请输入" :rows="4" type="textarea" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="price" label="人均价格" width="200">
                            <template #default="scope">
                                <el-input v-model="scope.row.price" placeholder="请输入" />
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="120">
                            <template #default="scope">
                                <el-button link type="primary" size="small"
                                    @click.prevent="deleteRowtickets(scope.$index)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-form-item>
            <el-form-item label="房型" v-if="ruleForm.type == 1">
                <el-button class="mt-4" style="width: 100px" @click="onAddItemrooms">添加房型</el-button>
                <div class="tableDiv">
                    <el-table :data="ruleForm.rooms" style="width: 100%" max-height="250">
                        <el-table-column fixed prop="title" label="房型名称" width="200">
                            <template #default="scope">
                                <el-input v-model="scope.row.title" placeholder="请输入" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="photo" label="房型图片" width="300">
                            <template #default="scope">
                                <Uploads :row="scope.row.photo" @OK="(data) => {
                                    scope.row.photo.push(...data)
                                }" @removeImg="(data) => {
                                    scope.row.photo = data
                                }"> </Uploads>
                            </template>
                        </el-table-column>
                        <el-table-column prop="description" label="描述" width="300">
                            <template #default="scope">
                                <el-input v-model="scope.row.description" placeholder="请输入" :rows="4" type="textarea" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="price" label="人均价格" width="200">
                            <template #default="scope">
                                <el-input v-model="scope.row.price" placeholder="请输入" />
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="120">
                            <template #default="scope">
                                <el-button link type="primary" size="small"
                                    @click.prevent="deleteRowrooms(scope.$index)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-form-item>



            <el-form-item label="简介">
                <Wangeditor @closeOK="closeOKDataCommodityDetails" :row="ruleForm.introduction">
                </Wangeditor>
            </el-form-item>
            <el-form-item label="门店地址">
                <el-input v-model="ruleForm.address" placeholder="请在地图上搜索" disabled>
                </el-input>
                <p style="margin: 0;">地图上搜索</p>
            </el-form-item>
            <el-form-item label="经度">
                <el-input v-model="ruleForm.lon" placeholder="请在地图上搜索" disabled>
                </el-input>
            </el-form-item>
            <el-form-item label="纬度">
                <el-input v-model="ruleForm.lat" placeholder="请在地图上搜索" disabled>
                </el-input>
            </el-form-item>
            <el-form-item label="地图信息">
                <mapActions :mapData="mapData" @OKmap="OKmap"></mapActions>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确认
                </el-button>
                <el-button @click="closeAdd()">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
// 富文本
import Wangeditor from '@/components/wangeditor/index.vue'
// 地图
import mapActions from '@/components/map/index.vue'
import { onMounted, reactive, ref } from 'vue'
import { listDetailesUpdate, listDetailesAdd } from '@/api/theCharts.js'
import Uploads from '@/components/elUploads/index.vue'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router';
const route = useRoute();
const emit = defineEmits(['closeAdd', 'closeOK'])
const props = defineProps({
    isAdd: {
        type: Boolean,
        default: true, // 默认值为 true
    },
    row: {
        type: Object,
        default: () => ({}), // 默认值为一个空对象
    },
})
onMounted(() => {
    if (!props.isAdd) {
        ruleForm.title = props.row.title; // 初始化表单字段值
        ruleForm.photo = props.row.photo; // 初始化表单字段值
        ruleForm.address = props.row.address; // 初始化表单字段值
        mapData.address = props.row.address; // 初始化表单字段值
        ruleForm.lon = props.row.lon; // 初始化表单字段值
        mapData.lon = props.row.lon; // 初始化表单字段值
        ruleForm.lat = props.row.lat; // 初始化表单字段值
        mapData.lat = props.row.lat; // 初始化表单字段值
        ruleForm.label = props.row.label; // 初始化表单字段值
        ruleForm.type = props.row.type; // 初始化表单字段值
        ruleForm.introduction = props.row.introduction; // 初始化表单字段值
        ruleForm.business = props.row.business; // 初始化表单字段值
        ruleForm.trafficStrategy = props.row.trafficStrategy; // 初始化表单字段值
        ruleForm.tips = props.row.tips; // 初始化表单字段值
        ruleForm.phone = props.row.phone; // 初始化表单字段值
        ruleForm.price = props.row.price; // 初始化表单字段值
        ruleForm.rooms = props.row.rooms; // 初始化表单字段值
        ruleForm.tickets = props.row.tickets; // 初始化表单字段值
    }
})

const ruleFormRef = ref()

const ruleForm = reactive({
    title: '',
    photo: [],
    address: '',
    lon: '',
    lat: '',
    label: [],
    type: '0',
    introduction: '',
    business: '',
    trafficStrategy: '',
    tips: '',
    phone: '',
    price: '',
    tickets: [],
    rooms: [],


})

// 添加房型
const deleteRowrooms = (index) => {
    ruleForm.rooms.splice(index, 1)
}

const onAddItemrooms = () => {
    ruleForm.rooms.push({
        title: '',
        photo: [],
        description: '',
        price: ''
    })
}




// 添加门票
const deleteRowtickets = (index) => {
    ruleForm.tickets.splice(index, 1)
}

const onAddItemtickets = () => {
    ruleForm.tickets.push({
        title: '',
        label: [],
        notice: '',
        price: ''
    })
}
const ticketsTab = ref('')
const inputVisibletickets = ref(-1)
const ticketsInputRef = ref()
const handleClosetickets = (tag, index) => {
    ruleForm.tickets[index].label.splice(ruleForm.tickets[index].label.indexOf(tag), 1)
}

const showInputtickets = (index) => {
    inputVisibletickets.value = index
    nextTick(() => {
        ticketsInputRef.value?.input?.focus()
    })
}

const handleInputConfirmtickets = (index) => {
    if (ticketsTab.value) {
        ruleForm.tickets[index].label.push(ticketsTab.value)
    }
    inputVisibletickets.value = -1
    ticketsTab.value = ''
}




// 类型
const changeType = () => {
    if (ruleForm.type == 0) {
        ruleForm.tickets = []
    } else {
        ruleForm.rooms = []
    }
}



const checkPhone = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('手机号码不能为空'));
    } else if (!/^1[3456789]\d{9}$/.test(value)) {
        return callback(new Error('请输入有效的手机号码'));
    } else {
        callback();
    }
};
const rules = reactive({
    title: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    phone: [
        { required: true, validator: checkPhone, trigger: 'blur' },
    ],
    photo: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    type: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
})
// 地图数据
const mapData = reactive(
    {
        // 门店地址
        address: '',
        // 经度
        lon: '',
        // 纬度
        lat: '',
    }
)
const OKmap = (data) => {
    mapData.address = data.name;
    mapData.lon = data.location?.lng;
    mapData.lat = data.location?.lat;
    ruleForm.address = data.name;
    ruleForm.lon = data.location?.lng;
    ruleForm.lat = data.location?.lat;

}

// 图片上传
const OKdata = (url) => {
    ruleForm.photo.push(...url)
}
// 图片-删除
const removeImg = (item) => {
    ruleForm.photo = item
}
//标签
const inputValue = ref('')
const inputVisible = ref(false)
const InputRef = ref()
const handleClose = (tag) => {
    ruleForm.label.splice(ruleForm.label.indexOf(tag), 1)
}
const showInput = () => {
    inputVisible.value = true
    nextTick(() => {
        InputRef.value?.input?.focus()
    })
}
const handleInputConfirm = () => {
    if (inputValue.value) {
        ruleForm.label.push(inputValue.value)
    }
    inputVisible.value = false
    inputValue.value = ''
}
// 简介
const closeOKDataCommodityDetails = (data) => {
    ruleForm.introduction = data
}


// 表格确认
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (props.isAdd) {
                listDetailesAdd(ruleForm).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '添加成功',
                        })
                        emit('closeOK')
                    }
                })
            } else {
                listDetailesUpdate({ ...ruleForm, id: props.row.id }).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        emit('closeOK')
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 关闭
const closeAdd = () => {
    emit('closeAdd')
}
</script>

<style lang="scss" scoped>
.tableDiv {
    width: 100%;
    display: flex;
    font-display: column;

    ::v-deep .el-input {
        width: 150px !important;
    }
    ::v-deep .el-textarea {
        width: 270px !important;
    }
}

.main {
    height: 85vh;
    overflow-y: auto;
}

.is-closable {
    margin-right: 5px;
}

.demo-ruleForm {

    .el-input,
    .el-select {
        width: 300px;
    }

    .el-textarea {
        width: 400px;
    }
}
</style>